<template>
	<view class="container">
	  <image :src="info.headPic" class="avatar"></image>
	  <view class="info_box">
	    <view class="title">{{info.teacherName}}</view>
	    <view class="info flex_box">
	      <view class="label">电话</view>
	      <view class="flex1 info_con">{{info.teacherPhone}}</view>
	      <image src="@/static/images/tel.png" class="tel_icon"></image>
	    </view>
	    <view class="info flex_box">
	      <view class="label">微信</view>
	      <view class="flex1 info_con">{{info.teacherPhone}}</view>
	      <image src="@/static/images/copy.png" class="copy_icon"></image>
	    </view>
	    <view class="info flex_box">
	      <view class="label">地址</view>
	      <view class="flex1 info_con">{{info.teacherAddr}}</view>
	      <image src="@/static/images/addr.png" class="copy_icon"></image>
	    </view>
	    <view class="info flex_box">
	      <view class="label">范围</view>
	      <view class="flex1 info_con">{{info.teachScope}}</view>
	    </view>
	  </view>
	  <view class="header">课程安排</view>
	  <view class="table_box">
	    <view class="flex_box table_th">
	      <view class="flex1 table_th_item">时间</view>
	      <view class="flex1 table_th_item">上午</view>
	      <view class="flex1 table_th_item">下午</view>
	      <view class="flex1 table_th_item">晚上</view>
	    </view>
			<view class="flex_box table_tr">
			  <view class="flex1 table_td_item">周内</view>
			  <view class="flex1 table_td_item">
			    <image :src="no" class="yes_icon"></image>
			  </view>
			  <view class="flex1 table_td_item">
			    <image :src="no" class="yes_icon"></image>
			  </view>
			  <view class="flex1 table_td_item">
			    <image :src="info.weekdayNight==1?yes:no" class="yes_icon"></image>
			  </view>
			</view>
	    <view class="flex_box table_tr">
	      <view class="flex1 table_td_item">周六</view>
	      <view class="flex1 table_td_item">
	        <image :src="info.saturdayMorning==1?yes:no" class="yes_icon"></image>
	      </view>
	      <view class="flex1 table_td_item">
	        <image :src="info.saturdayAfternoon==1?yes:no" class="yes_icon"></image>
	      </view>
	      <view class="flex1 table_td_item">
	        <image :src="info.saturdayNight==1?yes:no" class="yes_icon"></image>
	      </view>
	    </view>
			<view class="flex_box table_tr">
			  <view class="flex1 table_td_item">周日</view>
			  <view class="flex1 table_td_item">
			    <image :src="info.sundayMorning==1?yes:no" class="yes_icon"></image>
			  </view>
			  <view class="flex1 table_td_item">
			    <image :src="info.sundayAfternoon==1?yes:no" class="yes_icon"></image>
			  </view>
			  <view class="flex1 table_td_item">
			    <image :src="info.sundayNight==1?yes:no" class="yes_icon"></image>
			  </view>
			</view>
			
	  </view>
	  <view class="header">老师介绍</view>
	  <view class="introduce_box">
	    <view class="introduce" v-html="info.teacherRemark "></view>
	  </view>
	  <view class="control_box flex_box">
	    <view class="cart_box" @tap="goCart">
	      <image src="@/static/images/cart.png" class="cart_icon"></image>
	      <view class="cart_text">购物车</view>
	      <view class="cart_num" v-if="count>0">{{count}}</view>
	    </view>
	    <view class="flex1 btn yellow_btn" @tap="addCart">加入购物车</view>
	    <view class="flex1 btn org_btn" @tap="goOrder">支付试听</view>
	  </view>
	</view>

</template>

<script>
	import {toast} from '@/common/js/public.js'
	export default {
		data() {
			return {
				teacherNo:'',
				info:'',
				yes:require('@/static/images/yes.png'),
				no:require('@/static/images/no.png'),
				customerInfo:'',
				count:0
			}
		},
		onLoad(options) {
			this.teacherNo = options.teacherNo
			this.queryTeacherDetail()
		},
		onShow() {
			this.customerInfo = uni.getStorageSync('tutor_customerInfo') || ''
			if (this.customerInfo) {
				this.queryShoppingcartList()
			}
		},
		onShareAppMessage() {
			return {
				path:'/pages/details/details?teacherNo='+this.teacherNo,
				title:this.info.teacherName
			}
		},
		onShareTimeline() {
			return {
				path:'/pages/details/details?teacherNo='+this.teacherNo,
				title:this.info.teacherName
			}
		},
		methods: {
			queryTeacherDetail() {
				this.$api.queryTeacherDetail({teacherNo:this.teacherNo}).then(res=>{
					this.info = res.data
				})
			},
			// 查询列表
			queryShoppingcartList() {
				let param = {
					customerCode:this.customerInfo.customerCode
				}
				this.$api.queryShoppingcartList(param).then(res=>{
					if (res.code == 1) {
						this.count = res.data.length
					}
				})
			},
			goLogin() {
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			// 加入购物车
			addCart() {
				if (!this.customerInfo) {
					this.goLogin()
					return
				}
				let parm = {
					"customerCode": this.customerInfo.customerCode,
					"teachCount": this.info.minClassCount,
					"teacherNo": this.info.teacherNo
				}
				this.$api.addCartInfo(parm).then(res=>{
					if (res.code == 1) {
						toast('添加成功')
						this.queryShoppingcartList()
					} else {
						toast(res.msg)
					}
				})
			},
			// 去确认订单页面
			goOrder() {
				if (!this.customerInfo) {
					this.goLogin()
					return
				}
				let list = []
				list.push({
					teacherNo:this.info.teacherNo,
					teachCount:this.info.minClassCount,
					teacherInfo:this.info
				})
				let param = {
					"orderAmt": this.info.classPrice * this.info.minClassCount,
					// orderAmt:0.01,
					"list": list,
					"shoppingcartFlag": 0
				}
				console.log(param)
				uni.setStorageSync('pay_param',param)
				uni.navigateTo({
					url: '/pages/order/order',
				})
			},
			// 去购物车页面
			goCart() {
				if (!this.customerInfo) {
					this.goLogin()
					return
				}
				uni.navigateTo({
					url: '/pages/cart/cart',
				})
			}
		}
	}
</script>

<style scoped>
	.container{
	  min-height: 100vh;
	  background-color: #F5F5F5;
	  padding-bottom: 130rpx;
	  box-sizing: border-box;
	}
	.avatar{
	  width: 100%;
	  height: 360rpx;
	  line-height: 0;
	}
	.info_box{
	  background:#fff;
	  padding:20rpx 30rpx;
	}
	.title{
	  line-height: 42rpx;
	  margin-bottom: 20rpx;
		font-weight: bold;
	}
	.info{
	  margin-bottom: 20rpx;
	}
	.label{
	  margin-right: 30rpx;
	  color:#999;
	  line-height: 38rpx;
	}
	.info_con{
	  line-height: 38rpx;
	  text-overflow: ellipsis;
	  overflow: hidden;
	  white-space: nowrap;
	  padding-right: 20rpx;
	  box-sizing: border-box;
	}
	.copy_icon{
	  width: 20rpx;
	  height: 24rpx;
	}
	.tel_icon{
	  width: 24rpx;
	  height: 24rpx;
	}
	.header{
	  padding:30rpx 0 20rpx 0;
	  text-align: center;
	  font-size:34rpx;
	  line-height: 48rpx;
	  position: relative;
		font-weight: bold;
	}
	.header::after{
	  display: block;
	  content: '';
	  position: absolute;
	  left: 50%;
	  bottom:24rpx;
	  width: 174rpx;
	  height: 18rpx;
	  background:#34BE97;
	  opacity: 0.1;
	  border-radius: 10rpx;
	  margin-left: -87rpx;
	}
	.table_box{
	  padding:0 30rpx;
	}
	.table_th{
	  height: 60rpx;
	  line-height: 60rpx;
	  background:#34BE97;
	  border-radius: 10rpx 10rpx 0 0;
	}
	.table_th_item{
	  text-align: center;
	  color:#fff;
	}
	.table_tr{
	  height: 60rpx;
	  line-height: 60rpx;
	  background:#fff;
	}
	.table_tr:last-child{
	  border-radius:0 0 10rpx 10rpx;
	}
	.table_td_item{
	  text-align: center;
	  border-bottom: 2rpx solid #F0F0F0;
	}
	.table_td_item:first-child{
	  background:rgba(52, 190, 151, .3);
	  border-bottom:2rpx solid rgba(52, 190, 151, .3);
	}
	.table_tr:last-child .table_td_item:first-child{
	  border-radius:0 0 0 10rpx;
	}
	.table_tr:last-child .table_td_item{
	  border-radius:0 0 0 10rpx;
	  border:none;
	}
	.yes_icon{
	  width: 24rpx;
	  height: 24rpx;
	}
	.introduce_box{
	  padding:0 30rpx;
	}
	.introduce{
	  padding:22rpx 25rpx;
	  background:#fff;
	  color:#999;
	  line-height: 45rpx;
	  border-radius: 10rpx;
	}
	.control_box{
	  position: fixed;
	  left: 0;
	  bottom:0;
	  width: 100%;
	  padding:15rpx 30rpx;
	  box-sizing: border-box;
	  background-color: #fff;
	}
	.cart_box{
	  width: 70rpx;
	  margin-right: 30rpx;
	  position: relative;
	  text-align: center;
	}
	.cart_icon{
	  width: 40rpx;
	  height: 40rpx;
	}
	.cart_text{
	  text-align: center;
	  font-size: 20rpx;
	}
	.cart_num{
	  position: absolute;
	  right: 0;
	  top:0;
	  width: 20rpx;
	  height: 20rpx;
	  background:#EA7355;
	  border-radius: 50%;
	  color:#fff;
	  text-align: center;
	  line-height: 20rpx;
	  font-size: 14rpx;
	  box-shadow: 0px 3px 6px rgba(234, 115, 85, 0.15);
	}
	.org_btn{
	  height: 70rpx;
	  line-height: 70rpx;
	  background-color: #EA7355;
	  border-radius:0 70rpx 70rpx 0;
	}
	.yellow_btn{
	  height: 70rpx;
	  line-height: 70rpx;
	  background-color: #FAB467;
	  border-radius: 70rpx 0 0 70rpx;
	}
</style>
